parasails.registerPage('dashboard', {
  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
  data: {
    //…
  },

  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
  beforeMount: function() {
    //…
  },
  mounted: async function() {
    Chart.defaults.color = '#d4d4d8';
    Chart.defaults.borderColor = '#21262d';
    new Chart(document.getElementById('severityChart'), {
      type: 'doughnut',
      data: {
        labels: ['Critical', 'High', 'Medium', 'Low'],
        datasets: [{
          data: [this.totalUniqueCounts.critical, this.totalUniqueCounts.high, this.totalUniqueCounts.medium, this.totalUniqueCounts.low],
          backgroundColor: ['#dc2626', '#ea580c', '#ca8a04', '#16a34a'],
          borderWidth: 2,
          borderColor: '#010409'
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'bottom',
            labels: {
              padding: 20,
              usePointStyle: true,
              color: '#d4d4d8'
            }
          }
        }
      }
    });
    new Chart(document.getElementById('trendsChart'), {
      type: 'line',
      data: {
        // labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
        labels: _.pluck(this.activityTrendsTimeline, 'timelineLabel'),
        datasets: [{
          label: 'New CVEs',
          data: _.pluck(this.activityTrendsTimeline, 'newCves'),
          borderColor: '#dc2626',
          backgroundColor: 'rgba(220, 38, 38, 0.1)',
          tension: 0.4,
          borderWidth: 2,
          pointBackgroundColor: '#dc2626',
          pointBorderColor: '#ffffff',
          pointBorderWidth: 2,
          pointRadius: 5
        }, {
          label: 'Remediated CVEs',
          data: _.pluck(this.activityTrendsTimeline, 'remediatedCves'),
          borderColor: '#16a34a',
          backgroundColor: 'rgba(22, 163, 74, 0.1)',
          tension: 0.4,
          borderWidth: 2,
          pointBackgroundColor: '#16a34a',
          pointBorderColor: '#ffffff',
          pointBorderWidth: 2,
          pointRadius: 5
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
            grid: { color: '#21262d' },
            ticks: { color: '#7d8590' }
          },
          x: {
            grid: { color: '#21262d' },
            ticks: { color: '#7d8590' }
          }
        },
        plugins: {
          legend: {
            labels: {
              color: '#d4d4d8',
              usePointStyle: true,
              padding: 20
            }
          }
        }
      }
    });

    new Chart(document.getElementById('totalTrendChart'), {
      type: 'line',
      data: {
        labels: _.pluck(this.activityTrendsTimeline, 'timelineLabel'),
        datasets: [{
          label: 'Total CVEs',
          data: _.pluck(this.activityTrendsTimeline, 'totalNumberOfCves'),
          borderColor: '#8b5cf6',
          backgroundColor: 'rgba(139, 92, 246, 0.1)',
          tension: 0.4,
          borderWidth: 3,
          pointBackgroundColor: '#8b5cf6',
          pointBorderColor: '#ffffff',
          pointBorderWidth: 2,
          pointRadius: 6,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: false,
            min: 25000,
            grid: { color: '#21262d' },
            ticks: {
              color: '#7d8590',
              callback: function(value) {
                return (value / 1000).toFixed(1) + 'k';
              }
            }
          },
          x: {
            grid: { color: '#21262d' },
            ticks: { color: '#7d8590' }
          }
        },
        plugins: {
          legend: {
            labels: {
              color: '#d4d4d8',
              usePointStyle: true,
              padding: 20
            }
          }
        }
      }
    });
  },

  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
  methods: {
    //…
  }
});
